<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				width:200px;
				height:200px;
				background: red;
			}
		</style>
		<script>
			window.onload = function(){
				var oDiv = document.getElementById("div1");
				var speed = 10;
				var timer = setInterval(function(){
					//获得原来的宽度和高度
					var oldWidth = parseInt(getCss(oDiv,'width'));
					var oldHeight = parseInt(getCss(oDiv,'height'));
					console.log(oldWidth,oldHeight)
					if(oldWidth==200 && speed<0){
						clearInterval(timer);
						return;
					}
					if(oldWidth==400){
						speed = -10;
					}
					//计算新的宽度和高度
					var newWidth = oldWidth + speed;
					var newHeight = oldHeight + speed;
					//把新的宽度高度写入行内样式，以使div变化
					oDiv.style.width = newWidth + 'px';
					oDiv.style.height = newHeight + 'px';
				},200);
			}
			
			function getCss(obj,attr){
				if(obj.currentStyle){
					return obj.currentStyle[attr];
				}else{
					return getComputedStyle(obj,null)[attr];
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">

		</div>

		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
